iT邦幫忙

2022 iThome 鐵人賽

DAY 25
0
Modern Web

Node.js 從零開始系列 第 25

Node.js - 使用 reverse() 反轉資料排序

  • 分享至 

  • xImage
  •  

node

前面實作過一個簡易的代辦清單,

但目前的待辦清單最新的資料會在列表的後面,但現在使用者在陣列方法中可以使用 reverse() 方法反轉陣列的順序,但 firebase 只能用物件的方式呈現,那怎麼反轉呢?

把資料 push 到陣列中

既然物件沒有反轉,那就使用 forEach 把資料新增到陣列中吧!

來改寫一下隨時監聽內的寫法。

todo.on("value", function (snapshot) {
  let str = "";
  let data = [];
  snapshot.forEach((item) => {
    data.push(item.val());
  });

  data.reverse(); //* 反轉陣列資料
  
  for (let item in data) {
    str += `<li>${data[item].content}</li>`; //* 累加列表
  }

  list.innerHTML = str;
  memo.value = ""; //* 按下送出後,清空 input 的值
});

說明:

  1. 原本 data 改為空陣列。
  2. snapshot 參數使用 forEach() 將資料一筆一筆新增到陣列中。
  3. 再把此 data 陣列的資料使用 reverse() 方法反轉排序。
  4. 因為要取得資料中的 content 的值,故使用 for...in 取得資料內容,並渲染在網頁上。

Demo: https://codepen.io/hnzxewqw/embed/eYreLyj


上一篇
Node.js - 限制資料筆數 limit()
下一篇
Node.js - Express.js 介紹與起手式
系列文
Node.js 從零開始30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言